<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<style>
		html,body{
			background-color:#ffffff;
		}
		.content {
			width:100%;
			height:100%;
		}
		.image .webix_template{
			position: relative;
			background: #aaa;
			padding: 50px 60px;
		}
		.title{
			position: absolute;
			left: 10px;
			bottom: 15px;
			color: #fff;
			font-size: 16px;
		}
	</style>
	<title>Navigation types</title>
</head>

<body>
<script type="text/javascript" charset="utf-8">
	webix.ui({
		view:"window",
		body:{
			view:"carousel",
			id:"carousel1",
			cols:[
				{ css: "image", template:img, data:{src:"imgs/image001.jpg", title: "Image 1"} },
				{ css: "image", template:img, data:{src:"imgs/image002.jpg", title: "Image 2"} },
				{ css: "image", template:img, data:{src:"imgs/image003.jpg", title: "Image 3"} },
				{ css: "image", template:img, data:{src:"imgs/image004.jpg", title: "Image 4"} },
				{ css: "image", template:img, data:{src:"imgs/image005.jpg", title: "Image 5"} },
				{ css: "image", template:img, data:{src:"imgs/image006.jpg", title: "Image 6"} }
			],
			navigation:{
				type: "side"
			}
		},
		head:"'side' navigation",
		move: true,
		top:50,
		left:100,
		width:480,
		height:340
	}).show();

	webix.ui({
		view:"window",
		body:{
			view:"carousel",
			id:"carousel2",
			cols:[
				{ css: "image", template:img, data:{src:"imgs/image001.jpg", title: "Image 1"} },
				{ css: "image", template:img, data:{src:"imgs/image002.jpg", title: "Image 2"} },
				{ css: "image", template:img, data:{src:"imgs/image003.jpg", title: "Image 3"} },
				{ css: "image", template:img, data:{src:"imgs/image004.jpg", title: "Image 4"} },
				{ css: "image", template:img, data:{src:"imgs/image005.jpg", title: "Image 5"} },
				{ css: "image", template:img, data:{src:"imgs/image006.jpg", title: "Image 6"} }
			]
		},
		head:"Default navigation type",
		move: true,
		top:150,
		left:570,
		width:480,
		height:340
	}).show();

	function img(obj){
		return '<img src="'+obj.src+'" class="content" ondragstart="return false"/><div class="title">'+obj.title+'</div>'
	}

</script>
</body>
</html>